<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/iview.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
		<meta charset="utf-8" />
		<title></title>
		<style>

			.jd-title{
				width: 80%;
				height: 100px;
				color: white;

				font-size: 85px;
				line-height: 50px;
				position: absolute;
				text-align: center;
				left: 10%;
				top:calc(35% - 50px);

				z-index: 999;
			}
			.bt_home{
				width: 100px;
				height: 100px;
				border-radius: 50px;
				font-size: 80px;
				line-height: 50px;
				position: absolute;
				left: calc(50% - 50px);
				top:calc(55% - 50px);
				transition: left 0.5s;
				z-index: 999;
			}
			
			.form_login{
				position: absolute;
				height: 100px;
				width: 100px;
				left: calc(50% - 50px);
				top:calc(55% - 40px);
				
				transition: opacity 0.5s;
			}
			
			.bt_login{
				position: absolute;
				left: 160px;
				top: 0px;
				height: 80px;
				width: 50px;
			}
			
		</style>
	</head>
	<body>
		<div id="bg" class="bg">
			<Modal
				:visible.sync="isShowLoginResult"
				title="登陆"
				@on-ok=""
				>
				
				
				<p>{{result}}</p>
			</Modal>

			<div class="jd-title">酒店客房管理系统</div>

			<i-button  @click.native="changeShowLogin" class="bt_home" :style="btStyle" size="small" ><i class="fa fa-home" aria-hidden="true"></i></i-button>
			
			<div class="form_login" :style="loginStyle"  >
				<i-input :value.sync="uname" type="text" style="width: 150px;" placeholder="Username"></i-input>
				<br /><br />
				<i-input :value.sync="password" type="password" style="width: 150px;" placeholder="Password"></i-input>
				<i-button class="bt_login" type="info" size="small" @click="login" >登<br>陆</i-button>
			</div>
				
			<div>{{uname}}</div>
			
		</div>
		
	
			
			
		
		
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/iview.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/connect.js" type="text/javascript" charset="utf-8"></script>
	<script>
		
		
		var vm = new Vue({
			el:"#bg",
			data:{
				isShowLogin:false,
				uname:"",
				password:"",
                btStyle:{
					left:'calc(50% - 50px)'
				},
				loginStyle:{
					opacity:'0'
				},
				isShowLoginResult:false,
				result:''
			},
			methods:{
				changeShowLogin:function(event){
					
					this.isShowLogin = !this.isShowLogin;
					this.btStyle = this.isShowLogin?{left:'calc(50% - 165px)'}:{left:'calc(50% - 50px)'};
					this.loginStyle = this.isShowLogin?{opacity:'1'}:{opacity:'0'};
				},
				login(){
					rPost(loginPath,{"username":this.uname,"password":this.password},function(result){
						//成功
						if(result.res){
							window.location.href= "main.html";
						}
						else{
							vm.result = "登陆失败！";
							vm.isShowLoginResult = true;
						}
							
					},function(){
					    vm.result = "网络错误，登陆失败！";
						vm.isShowLoginResult = true;
					});
					
				}
				
			}
		})
		
		
		
	</script>
	</body>
</html>
